<div class="popoverdemo">
  <button
    lv-popover
    [lvPopoverHeader]="headerTemplate"
    [lvPopoverContent]="contentTemplate"
    [lvPopoverFooter]="footerTemplate"
    lvPopoverContextData="context data"
    lvPopoverTheme="light"
    lvPopoverTrigger="customize"
    [lvPopoverBeforeOpen]="beforeOpen"
    (lvPopoverExternalTrigger)="externalClose()"
    [(lvPopoverVisible)]="visible"
    lvPopoverBlockPageScroll="true"
    lvPopoverBackdrop="true"
    lvPopoverMaskTransparent="true"
    (click)="open()"
    lv-button
  >
    Click me
  </button>

  <ng-template #headerTemplate let-data>
    <div class="customer-header">
      <i lv-icon="icon-account" style="vertical-align: initial"></i>
      <span style="margin-left: 0.08rem">Title {{ data }}</span>
    </div>
  </ng-template>
  <ng-template #contentTemplate let-data>
    <div class="customer-content">
      <lv-group lvGutter="0.08rem">
        <i lv-icon="lv-icon-status-succeed"></i>
        <span>Content {{ data }}</span>
      </lv-group>

      <lv-checkbox-group [(ngModel)]="selected">
        <lv-group lvDirection="vertical" lvGutter="0.08rem">
          <lv-checkbox [lvValue]="'item001'">Item 001</lv-checkbox>
          <lv-checkbox [lvValue]="'item002'">Item 002</lv-checkbox>
          <lv-checkbox [lvValue]="'item003'">Item 003</lv-checkbox>
          <lv-checkbox [lvValue]="'item004'">Item 004</lv-checkbox>
          <lv-checkbox [lvValue]="'item005'">Item 005</lv-checkbox>
          <lv-checkbox [lvValue]="'item006'">Item 006</lv-checkbox>
          <lv-checkbox [lvValue]="'item007'">Item 007</lv-checkbox>
          <lv-checkbox [lvValue]="'item008'">Item 008</lv-checkbox>
          <lv-checkbox [lvValue]="'item009'">Item 009</lv-checkbox>
          <lv-checkbox [lvValue]="'item0010'">Item 010</lv-checkbox>
        </lv-group>
      </lv-checkbox-group>
    </div>
  </ng-template>
  <ng-template #footerTemplate let-data>
    <div class="customer-footer">
      <lv-group lvGutter="0.08rem">
        <button lv-button (click)="cancel()">Cancel</button>
        <button lv-button [lvLoading]="loading" lvLoadingText="loading" lvType="primary" (click)="confirm()">Confirm</button>
      </lv-group>
    </div>
  </ng-template>
</div>
